<template>
    <view class="page">
        <!--<select-origin-house :h_id.sync="h_id" :show="showPop" :houseList="houseList" @cancel="cancel"></select-origin-house>-->

        <u-swiper
                :list="data.images"
                @change="e => this.currentNum = e.current"
                indicatorStyle="right: 20px"
                height="160"
        >
            <view
                    slot="indicator"
                    class="indicator-num"
            >
                <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
            </view>
        </u-swiper>

        <!--<view class="empty">-->
            <!--<u-upload-->
                    <!--:fileList="houseImgList"-->
                    <!--@afterRead="afterRead"-->
                    <!--@delete="deletePic"-->
                    <!--name="house"-->
                    <!--multiple-->
                    <!--:maxCount="16">-->
                <!--<u-icon :customStyle="{paddingTop:20+'rpx'}" name="camera" size="102"></u-icon>-->

            <!--</u-upload>-->
            <!--<text class="grid-text">注：上传装修照片和房东证件各8张照片</text>-->
        <!--</view>-->

        <view>
            <view style="background-color: #ffffff">
                <view style="padding: 10rpx 25rpx"><u-text type="primary" text="基本信息" size="16"></u-text></view>
                <u-cell-group>
                    <u-cell title="地 址" :value="data.address"></u-cell>
                    <u-cell title="姓 名" :value="data.name"></u-cell>
                    <u-cell title="电 话" :value="data.tel"></u-cell>
                    <u-cell title="证件类型" :value="data.n_type"></u-cell>
                    <u-cell title="证件号码" :value="data.num"></u-cell>
                </u-cell-group>
            </view>
            <u-gap height="20"></u-gap>
            <view style="background-color: #ffffff">
                <view style="padding: 10rpx 25rpx"><u-text type="primary" text="托管信息" size="16"></u-text></view>
                <u-cell-group>
                    <u-cell title="收房价格" :value="data.put_money"></u-cell>
                    <u-cell title="押   金" :value="data.cash_money"></u-cell>
                    <u-cell title="开始时间" :value="data.care_time_start"></u-cell>
                    <u-cell title="到期时间" :value="data.care_time_end"></u-cell>
                    <u-cell title="转款姓名" :value="data.tran_name"></u-cell>
                    <u-cell title="缴费方式" :value="data.pay_type"></u-cell>
                    <u-cell title="银行名称" :value="data.bank_name"></u-cell>
                    <u-cell title="银行卡号" :value="data.bank_num"></u-cell>
                    <u-cell title="备注信息" :value="data.remake"></u-cell>
                </u-cell-group>
            </view>
        </view>
        <u-gap height="70"></u-gap>
        <view class="safe-area-inset-bottom"></view>

        <view class="fixed">
            <view class="footer">
                <view class="btn-item">
                    <u-icon :customStyle="{paddingTop:20+'rpx'}" name="more-dot-fill" size="22"></u-icon>
                    <text class="grid-text">修改</text>
                </view>
                <view class="btn-item" @click="goBillPage">
                    <u-icon :customStyle="{paddingTop:20+'rpx'}" name="file-text" size="22"></u-icon>
                    <text class="grid-text">账单</text>
                </view>
                <view class="btn-item" @click="callHandler">
                    <u-icon :customStyle="{paddingTop:20+'rpx'}" name="phone" size="22"></u-icon>
                    <text class="grid-text">电话</text>
                </view>
                <view class="btn-item">
                    <text class="grid-text" style="font-size: 20px;color: #666666;font-weight: 500;">{{data.tel}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import SelectOriginHouse from './components/SelectOriginHouse';

    export default {
        name: "manage",
        components:{
            SelectOriginHouse
        },
        data(){
            return {
                showPop: true,
                houseList:[],
                h_id: '',
                list6: [
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                ],
                currentNum: 0,
                houseImgList:[],
                data:{},
            }
        },
        onLoad(){
            uni.$u.http.get('/api.php/House/house_list',
                {params:{u_id:uni.getStorageSync('u_id')}}).then(res => {
                this.houseList = res;
            });
        },
        methods:{
            cancel(){
                this.showPop = false;
                uni.showLoading({title: '正在加载'});
                uni.$u.http.get('/api.php/House/owner_find',
                    {params: {u_id: uni.getStorageSync('u_id'), h_id: this.h_id}}).then(res => {
                    uni.hideLoading();
                    this.data = res;
                });
            },

            // 删除图片
            deletePic(event) {
                this[`${event.name}ImgList`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`${event.name}ImgList`].length
                lists.map((item) => {
                    this[`${event.name}ImgList`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`${event.name}ImgList`][fileListLen]
                    this[`${event.name}ImgList`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(url) {
                let server = this.$url + '/api.php/index/file_update';
                return new Promise((resolve, reject) => {
                    uni.uploadFile({
                        url: server,
                        filePath: url,
                        name: 'image[]',
                        success: (res) => {
                            let resp = JSON.parse(res.data);
                            setTimeout(() => {
                                resolve(resp.data.img_url[0]);
                            }, 1000)
                        }
                    });
                })
            },

            goBillPage(){
                // todo
                uni.navigateTo({url:'/pages/landlord/plus/bill' + uni.$u.queryParams({owner_id: this.data.owner_id})});
            },
            callHandler(){
                uni.makePhoneCall({
                    phoneNumber: this.data.tel.toString()
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: #f3f4f6;
    }

    .content {
        padding: 20rpx;
    }

    .header{
        height: 35vh;
    }

    .indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
            height: 6px;
            width: 6px;
            border-radius: 100px;
            background-color: rgba(255, 255, 255, 0.35);
            margin: 0 5px;
            transition: background-color 0.3s;

            &--active {
                background-color: #ffffff;
            }
        }
    }

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
            color: #FFFFFF;
            font-size: 12px;
        }
    }

    .empty{
        width: 100%;
        height: 160px;
        flex-direction: column;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fixed{
        width: 100%;
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .footer{
        display: flex;
        flex-direction: row-reverse;
    }

    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;
        box-sizing: border-box;
    }

    .btn-item {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-sizing: border-box;
        display: flex;
        float: left;
        margin-right: 40rpx;
        margin-bottom: 0;
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
    }
</style>